import styled from 'styled-components';

export const EditorLayout = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;

  .editor-head {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 32px;
    padding: 0 16px;
    border-bottom: 1px solid #e4e7ed;
    background-color: #fff;

    .editor-head-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 8px;
    }
    .editor-head-extra {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 auto;
      margin: 0;
      padding: 0;
      padding-bottom: 8px;
      border: 0;
      background: #0000;
    }
  }
  .editor-body {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
`;

export const EditorToolbarLayout = styled.div`
  &.editor-toolbar {
    display: inline-flex;
    align-items: center;
    .editor-toolbar-group {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 10px;
      gap: 8px;

      &:after {
        content: '';
        position: absolute;
        top: 20%;
        right: 0;
        width: 1px;
        height: 60%;
        background-color: #dfe0e8;
      }
      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
        &:after {
          height: 0;
        }
      }

      .editor-toolbar-group-item {
        display: inline-flex;
        align-items: center;
      }

      &.editor-toolbar-group-setting {
        .editor-toolbar-group-item {
          margin-bottom: 16px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .ant-btn {
        display: inline-flex;
        align-items: center;

        svg {
          font-size: 16px;
        }
      }
      .ant-space {
        .ant-space-item {
          display: inline-flex;
          flex: 0 0 auto;
        }
      }
    }
  }
`;

export const EditorContainerLayout = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;

  .ant-spin-nested-loading,
  .ant-spin-container {
    width: 100%;
    height: 100%;
  }
`;
